<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>层的使用</title>
    <style>

        *{
            margin: 0 ;
            padding: 0;
        }
        .p1{
            width: 300px;
            height: 300px;
            padding: 20px;
            background-color: red;
        }
        .p2{
            width: 300px;
            height: 300px;
            padding: 20px;
            background-color: green;
        }
        .p3{
            width: 300px;
            height: 300px;
            padding: 20px;/*内边距*/
            background-color: blue;
        }
        .parent{
            font-size: 0;/*消除空隙*/
            position: relative;/*相对位置，定位父元素*/
        }
        /*共同的属性*/
        .parent div{
            width: 300px;
            height: 300px;
            position: absolute;/*定位子元素*/
            display: inline-block;/*在同一行显示*/
        }
      .parent .c1{
          z-index: 102;
            background-color: red;
        }
        .parent .c2{
            left: 20px;
            top: 20px;
            z-index: 100;/*z的索引，值越大，离屏幕越远，离眼睛越近*/
            background-color: green;
        }
        .parent .c3{
            left: 40px;
            top: 40px;
            background-color: blue;

        }

    </style>
</head>
<body>
<!--通过父子嵌套实现层叠效果
    <div class="p1">
        <div class="p2">
            <div class="p3">

            </div>
        </div>
    </div>-->

<div class="parent">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>





</body>
</html>